<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>相册选择展示</title>
  <style>
      * {
          margin: 0;
          padding: 0;
      }

      .display {
          width: 400px;
          height: 400px;
      }

      .display img {
          width: 100%;
          height: 100%;
      }

      .imgs {
          font-size: 0; /* 去除inline-block造成的空隙 */
      }

      img {
          width: 100px;
          height: 100px;
          cursor: pointer;
      }

  </style>
</head>
<body>
<div class="display">
  <img alt="" src="../img/modx.png">
</div>
<div class="imgs">
  <img alt="" src="../img/modx.png">
  <img alt="" src="../img/sou.png">
  <img alt="" src="../img/vue.png">
  <img alt="" src="../img/ycy.png">
</div>
</body>
<script>
  let imgs = document.getElementsByTagName('img');
  for (let i = 1; i < imgs.length; i++) {
    imgs[i].onmouseover = function () {
      imgs[0].src = this.src
      this.style.border = '1px solid red'
    }
    imgs[i].onmouseout = function () {
      this.style.border = 'none'
    }
  }
</script>
</html>